<!--题库管理-->
<div class="OutDiv">
  <!--主页面-->
  <div class="mainPage" [hidden]="mainStatus !== 1">
    <div class="leftTree">
      <div style="padding: 10px 15px;">
        <app-questionbank-manage-tree (treeClick)="clickTree($event)" [treeId]="'questionbankTree'"></app-questionbank-manage-tree>
      </div>
    </div>
    <div class="rightDiv">
      <div class="exciseTableDiv">
        <div class="aRow tableTop">
          <button nz-button nzType="primary" (click)="clickAdd()"><i nz-icon nzType="plus"
                                                                     nzTheme="outline"></i>新增
          </button>
          <button nz-button nzType="default"
                  nz-popconfirm
                  nzOkType="danger"
                  nzTitle="确定删除所选试题吗?"
                  (nzOnCancel)="moveCloseFn()"
                  (nzOnConfirm)="deleteAll()"
                  nzPlacement="top"
                  [disabled]="canDelete"
          >
            <i nz-icon nzType="delete" nzTheme="outline"></i>批量删除
          </button>
          <div style="float: right;">
            <span>题型：</span>
            <nz-select style="width: 180px; margin-right: 20px" nzAllowClear nzPlaceHolder="请选择" [(ngModel)]="mainExciseType" (ngModelChange)="typeChange($event)">
              <nz-option nzValue="单选题" nzLabel="单选题"></nz-option>
              <nz-option nzValue="简答题" nzLabel="简答题"></nz-option>
            </nz-select>
            <span>题目：</span>
            <input nz-input [(ngModel)]="exciseContent" placeholder="请输入"/>
            <button nz-button style="margin-right:10px;" nzType="primary" (click)="clickSearch()">查询
            </button>
            <button style="margin-right: 0" nz-button nzType="default" (click)="resetSearch()">重置</button>
          </div>
        </div>
        <div class="w100 fl-l">
          <ng-template #totalTemplate let-total>总共 {{ pageInfo.totalRecords ? pageInfo.totalRecords : 0 }}条
          </ng-template>
          <nz-table
            #exciseBankTable
            nzBordered
            [nzData]="allList"
            [nzFrontPagination]="false"
            [nzShowPagination]="true"
            [nzPageIndex]="pageInfo.first"
            [nzTotal]="pageInfo.totalRecords"
            [nzShowTotal]="totalTemplate"
            [nzPageSize]="pageInfo.rows"
            [nzLoadingDelay]="1"
            [nzPageSizeOptions]="[10,20,30,50,100]"
            [nzShowQuickJumper]="true"
            [nzShowSizeChanger]="true"
            (nzPageIndexChange)="searchPageIndex($event)"
            (nzPageSizeChange)="searchPageSize($event)"
            (nzCurrentPageDataChange)="currentPageDataChange($event)"
          >
            <thead>
            <tr>
              <th class="tableCheck"
                  nzShowCheckbox
                  [(nzChecked)]="isAllCheck"
                  [nzIndeterminate]="isIndeterminate"
                  (nzCheckedChange)="checkAll($event)"
                  nzWidth="60px"
              ></th>
              <th nzWidth="120px">题型</th>
              <th nzWidth="150px">问题分类</th>
              <th>题目</th>
              <th nzWidth="100px">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let data of exciseBankTable.data">
              <td
                nzShowCheckbox
                [(nzChecked)]="mapOfCheckedId[data.id]"
                (nzCheckedChange)="refreshStatus()"
              ></td>
              <td>{{ data.type}}</td>
              <td>{{ data.classifyName}}</td>
              <td>
                <div [innerHTML]="data.content" class="editimg"></div>
              </td>
              <td>
                <span class="operaFont firOpera" (click)="edit(data)">编辑</span>
                <span class="operaFont operaTao"
                      nz-popconfirm
                      nzOkType="danger"
                      nzTitle="确定删除该试题吗?"
                      (nzOnConfirm)="deleteOne(data.id)"
                      nzPlacement="top"
                >删除</span>
              </td>
            </tr>
            </tbody>
          </nz-table>
        </div>
      </div>
    </div>
  </div>
  <!--新增页面-->
  <div class="addPage" *ngIf="mainStatus === 2">
    <div style="height: 50px;">
      <span>{{param.id?'编辑':'新增'}}題目</span>
      <span class="back-info operaFont" (click)="back()">
        返回上一级<i class="fa fa-reply m-l-sm"></i>
      </span>
    </div>
    <div class="topDiv">
      <label>
        <span><i style="color: red;margin-right: 4px">*</i>题型：</span>
        <nz-select style="width: 180px;" nzAllowClear nzPlaceHolder="请选择" [(ngModel)]="param.type" (ngModelChange)="typeChange($event)" [disabled]="param.id">
          <nz-option nzValue="单选题" nzLabel="单选题"></nz-option>
          <nz-option nzValue="简答题" nzLabel="简答题"></nz-option>
        </nz-select>
      </label>
      <label>
        <span><i style="color: red;margin-right: 4px">*</i>问题分类：</span>
        <nz-select style="width: 180px;" nzAllowClear nzPlaceHolder="请选择" [(ngModel)]="param.classifyId">
          <nz-option [nzValue]="opt.id" [nzLabel]="opt.name" *ngFor="let opt of moveTreeType;"></nz-option>
        </nz-select>
      </label>
    </div>
    <!--单选题-->
    <div class="exciseAll" *ngIf="exciseType === 1">
      <!--      顶部栏-->
      <div style="width: 100%; height: 325px">
        <div class="aRow">
          <span><i style="color: red;margin-right: 4px">*</i>题目:请在下方文本框输入题目</span>
        </div>
        <div nz-row>
          <div nz-col nzSpan="24" *ngIf="exciseType === 1">
            <umeditor
              [(ngModel)]="singleText"
              [config]="'assets/umeditor/umeditor.config.js'"
              [path]="'assets/umeditor/'"
              [loadingTip]="'加载中……'"
            ></umeditor>
          </div>
        </div>
      </div>
      <div style="margin-top: 30px">
        <table class="table">
          <thead>
          <tr>
            <th style="width: 60%;">选项</th>
            <th style="width: 10%;">允许填空</th>
            <th style="width: 15%">上移下移</th>
            <th style="width: 15%">选项分值比例(%)</th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let item of optItemList; let i = index;">
            <td>
              <input type="text" nz-input [(ngModel)]="item.name" style="width: 80%;">
              <span class="spani m-r-lm m-l-lm" (click)="addTr(i)"><i nz-icon nzType="plus-circle" nzTheme="outline"></i></span>
              <span class="spani" (click)="delTr(i)"><i nz-icon nzType="minus-circle" nzTheme="outline"></i></span>
            </td>
            <td>
              <label nz-checkbox [(ngModel)]="item.canEmpty"></label>
            </td>
            <td>
              <span class="spani m-r-lm" (click)="upDataItemType(i)"><i nz-icon nzType="up-circle" nzTheme="outline"></i></span>
              <span class="spani" (click)="downDataItemType(i)"><i nz-icon nzType="down-circle" nzTheme="outline"></i></span>
            </td>
            <td>
              <nz-input-number class="w100" [nzMax]="100" [nzMin]="0" [(ngModel)]="item.scoreRatio"></nz-input-number>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!--简答题-->
    <div class="exciseAll" *ngIf="exciseType === 2">
      <!--      顶部栏-->
      <div style="width: 100%; height: 325px">
        <div class="aRow">
          <span><i style="color: red;margin-right: 4px">*</i>题目:请在下方文本框输入题目</span>
        </div>
        <div nz-row>
          <div nz-col nzSpan="24" *ngIf="exciseType === 2">
            <umeditor
              [(ngModel)]="shortText"
              [config]="'assets/umeditor/umeditor.config.js'"
              [path]="'assets/umeditor/'"
              [loadingTip]="'加载中……'"
            ></umeditor>
          </div>
        </div>
      </div>
    </div>
    <div class="submitStyle">
      <div>
        <button nz-button nzType="default" nzSize="default" (click)="cancelBack()" style="margin-right:20px;">
          取消
        </button>
        <button nz-button nzType="primary" nzSize="default" (click)="submitExcise()" [nzLoading]="isLoading">
          确定
        </button>
      </div>
    </div>
  </div>
</div>
